<template>
  <div class="publicity-detail-view view-container">

    <header-module
      left-custom
      padding
    >
      <template #left-con>
        <div>
          <span
            v-if="datas.planInfo.planType == 1"
            style="font-size: 16px; margin-right: 20px"
          >精细招商规划 {{ datas?.planDetail?.detailNo }} </span>
          <span
            v-else-if="datas.planInfo.planType == 2"
            style="font-size: 16px; margin-right: 20px"
          >区域招商规划 {{ datas?.planDetail?.detailNo }} </span>
          <span
            v-else-if="datas.planInfo.planType == 3"
            style="font-size: 16px; margin-right: 20px"
          >终端直销规划 {{ datas?.planDetail?.detailNo }} </span>
          <span
            v-else-if="datas.planInfo.planType == 4"
            style="font-size: 16px; margin-right: 20px"
          >商业营销规划 {{ datas?.planDetail?.detailNo }} </span>
          <!--
          <el-tag
            size="small"
            type="warning"
          >{{ getStatus() }}</el-tag>
          -->

        </div>
      </template>

      <template #btn>
        <el-button
          class="main-btn"
          size="small"
          @click="onBack"
        >返回</el-button>
        <el-button
          v-if="datas.planInfo.planType != 3 && datas.planInfo.planType != 4"
          class="main-btn"
          size="small"
          type="primary"
          @click="onEditorial"
        >推荐代理</el-button>
        <template v-if="datas.planInfo.planType == 2">
<!--          <el-button-->
<!--            v-auth="{v:['crm:planSignedPublicity:pms'],bool:datas.planDetail.detailStatus == 1}"-->
<!--            class="main-btn"-->
<!--            size="small"-->
<!--            type="primary"-->
<!--            @click="resultClick"-->
<!--          >代理签约结果-->
<!--          </el-button>-->
          <el-button
                  v-auth="{v:['crm:planSignedPublicity:pms'],bool:datas.planDetail?.detailStatus != 4}"
                  class="main-btn"
                  size="small"
                  type="primary"
                  @click="endClick"
          >结束
          </el-button>
        </template>
        <template v-else-if="datas.planInfo.planType == 1">
<!--          <el-button-->
<!--            v-auth="{v:['crm:planFinePublicity:pms'],bool:datas.planDetail.detailStatus == 1}"-->
<!--            class="main-btn"-->
<!--            size="small"-->
<!--            type="primary"-->
<!--            @click="agentFail"-->
<!--          >代理开发失败-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            v-auth="{v:['crm:planFinePublicity:pms'],bool:datas.planDetail?.detailStatus > 1 && datas.planDetail?.detailStatus != 4}"-->
<!--            class="main-btn"-->
<!--            size="small"-->
<!--            type="primary"-->
<!--            @click="failClick"-->
<!--          >终端开发失败-->
<!--          </el-button>-->
          <el-button
                  v-auth="{v:['crm:planFinePublicity:pms'],bool:datas.planDetail?.detailStatus != 4}"
                  class="main-btn"
                  size="small"
                  type="primary"
                  @click="endClick"
          >结束
          </el-button>
        </template>
        <template v-else-if="datas.planInfo.planType == 3">
          <el-button
            v-auth="{v:['crm:plandirectPublicity:pms'],bool:datas.planDetail?.detailStatus != 4}"
            class="main-btn"
            size="small"
            type="primary"
            @click="endClick"
          >结束
          </el-button>
        </template>
        <template v-else-if="datas.planInfo.planType == 4">
          <el-button
            v-auth="{v:['crm:planBusinessPublicity:pms'],bool:datas.planDetail?.detailStatus != 4}"
            class="main-btn"
            size="small"
            type="primary"
            @click="recommendSeller"
          >推荐商销客户
          </el-button>
          <el-button
            v-auth="{v:['crm:planBusinessPublicity:pms'],bool:datas.planDetail?.detailStatus != 4}"
            class="main-btn"
            size="small"
            type="primary"
            @click="endClick"
          >结束
          </el-button>
        </template>

      </template>

    </header-module>

    <div class="main-content">

      <signedDetail
        v-if="datas.planInfo.planType == 2"
        :datas="datas"
      />

      <fineDetail
        v-else-if="datas.planInfo.planType == 1"
        :datas="datas"
      />

      <directDetail
        v-else-if="datas.planInfo.planType == 3"
        :datas="datas"
      />

      <businessDetail
        v-else-if="datas.planInfo.planType == 4"
        :datas="datas"
      />

    </div>

    <resultDialog
      ref="resultDialog"
      @success="getData"
    />

    <recommendSeller
      ref="recommendRef"
      :plan-detail-id="datas?.planDetail?.id"
      @succsess="getData"
    />

  </div>

</template>

<script>
import { useRoute, useRouter } from 'vue-router'
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from 'vue'

export default defineComponent({
  name: 'Index',
  components: {
    signedDetail: defineAsyncComponent(() =>
      import('./modules/signedDetail.vue')
    ),
    fineDetail: defineAsyncComponent(() => import('./modules/fineDetail.vue')),
    directDetail: defineAsyncComponent(() =>
      import('./modules/directDetail.vue')
    ),
    businessDetail: defineAsyncComponent(() =>
      import('./modules/businessDetail.vue')
    ),
    resultDialog: defineAsyncComponent(() =>
      import('../modules/resultDialog.vue')
    ),
    recommendSeller: defineAsyncComponent(() =>
      import('@CRM/views/editorial/shangPin/modules/newForm.vue')
    ),
  },
  setup() {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const route = useRoute()
    const router = useRouter()
    var data = reactive({
      datas: {
        planDetail: {},
        planInfo: {},
      },
      resultDialog: null,
      recommendRef: null,
    })

    const onBack = () => {
      router.back()
    }

    const resultClick = () => {
      data.resultDialog.open(data.datas.planDetail.id)
    }

    const agentFail = () => {
      currentInstance.proxy
        .alertBox({
          message: '确定更改此规划为开发失败？',
          title: '开发失败',
        })
        .then(() => {
          const d = {
            planDetailId: data.datas.planDetail.id,
            result: '2',
          }
          api.plan.PLAN_AGENT_CONTRACT_RESULT(d).then((res) => {
            if (!res.code) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '更新成功',
              })
              getData()
            } else {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const failClick = () => {
      currentInstance.proxy
        .alertBox({
          message: '确定更改此规划为开发失败？',
          title: '开发失败',
        })
        .then(() => {
          api.terminal
            .TERMINAL_FAILURE(data.datas.planDetail.id)
            .then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                currentInstance.proxy.customMessage({
                  type: 'success',
                  message: '操作成功',
                })
                getData()
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const endClick = () => {
      currentInstance.proxy
        .alertBox({
          message: '确定更改此规划为结束？',
          title: '结束',
        })
        .then(() => {
          api.plan.PLAN_DO_END(data.datas.planDetail.id).then((res) => {
            if (!res.code) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '更新成功',
              })
              onBack()
            } else {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const onEditorial = () => {
      router.push({
        path: '/editorial/advanceAgent/create',
        query: { id: data.datas.planDetail.id },
      })
    }

    const getData = () => {
      api.plan.PLAN_DETAIL_DETAIL(route.query.id).then((res) => {
        if (!res.code) {
          data.datas = res.data
        } else {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
        }
      })
    }

    const getStatus = () => {
      let str = ''

      switch (data.datas.planDetail.detailStatus) {
        case '0':
          str = '待分配'
          break
        case '-2':
          str = '待分配'
          break
        case '-3':
          str = '待分配'
          break
        case '-4':
          str = '待分配'
          break
        case '-5':
          str = '待分配'
          break
        case '1':
          str = '代理开发中'
          break
        case '2':
          str = '终端开发中'
          break
        case '3':
          str = '终端开发中'
          break
      }
      if (str == '终端开发中' && data.datas.planInfo.planType == 4) {
        str = '客户开发中'
      }
      console.log(str)

      return str
    }

    const recommendSeller = (row) => {
      data.rowData = row
      data.recommendRef.open('推荐商销客户', null)
    }

    onMounted(() => {
      getData()
    })

    return {
      ...toRefs(data),

      getData,
      onBack,
      resultClick,
      agentFail,
      failClick,
      onEditorial,
      getStatus,
      endClick,
      recommendSeller,
    }
  },
})
</script>

<style scoped>
</style>
